<template>
  <el-amap
    style="width: 100%; height: 300px"
    vid="amap"
    :zoom="zoom"
    :center="center"
    ref="map"
    class="amap-demo"
  >
    <el-amap-rectangle
      :bounds="path"
      :visible="visible"
      :editable="editRan"
      draggable
      @click="click"
      @move="move"
      @adjust="adjust"
    ></el-amap-rectangle>
    <el-amap-search-box
      :visible="visibleSearch"
      @select="selectPoi"
      @choose="selectPoi"
    />
  </el-amap>
</template>
 
<script>
export default {
  name: "ReportAreaForm",
  data() {
    return {
      zoom: 12,
      center: [117.970675, 37.38268],
      draggable: false,
      visible: true,
      editRan: true,
      //117.976759
      path: [
        [117.976759, 37.387188],
        [117.96463, 37.37886],
      ],
      visibleSearch: true,
    };
  },
  computed: {},
  created() {},
  methods: {
    switchVisible() {
      this.visible = !this.visible;
    },
    selectPoi(e) {
      this.visible = false;
      let lat = e.poi.location.lat;
      let lng = e.poi.location.lng;
      console.log(
        "selectPoi: ",
        e,
        e.poi.location.lat,
        " ",
        e.poi.location.lng
      );
      this.center = [lng, lat];
      this.path = [
        [lng + 0.006084, lat + 0.004508],
        [lng - 0.006045, lat - 0.00402],
      ];
      this.model.longitude1 = lng + 0.006084;
      this.model.latitude1 = lat + 0.004508;
      this.model.longitude2 = lng - 0.006045;
      this.model.latitude2 = lat - 0.00402;
      this.visible = true;
    },
    click: (e) => {
      // console.log('点击', e, this.path, this.center)
    },
    toggleVisible() {
      this.visible = !this.visible;
    },
    changeDraggable() {
      this.draggable = !this.draggable;
    },
    toggleEdit() {
      this.editRan = !this.editRan;
      console.log("点击", this.path, this.center);
    },
    adjust(e) {
      console.log("adjust:", e);
      this.model.longitude1 = e.bounds.southWest.lng;
      this.model.latitude1 = e.bounds.southWest.lat;
      this.model.longitude2 = e.bounds.northEast.lng;
      this.model.latitude2 = e.bounds.northEast.lat;
      console.log("adjust:", this.model);
    },
    move(e) {
      console.log("move:", e);
      this.model.longitude1 = e.bounds.southWest.lng;
      this.model.latitude1 = e.bounds.southWest.lat;
      this.model.longitude2 = e.bounds.northEast.lng;
      this.model.latitude2 = e.bounds.northEast.lat;
      console.log("move:", this.model);
    },
    add() {
      this.edit(this.modelDefault);
    },
  },
};
</script>
<style>
.amap-demo {
  height: 500px;
}
</style>